멋쟁이 사자처럼 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 20일 반응형 이미지 반응형 백그라운드 이미지 반응형 동영상 이미지 포맷의 종류를 한 번 더 살펴보자. GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 웬만한 컬러는 모두 표현 가능하기 때문에 투명 영역 처리는 가능하지만... 멋쟁이 사자처럼TILTIL 기업들이 사용하는 IR(image Replacement) 기법들 특정 요소를 스크린 리더 친화적 환경을 위해서라면 html 문서에는 남겨둬야하지만, 동시에 디자인적으로는 숨겨야 하는 때가 있다. 이런 IR 기법은 스크린 리더의 사용성을 높일 뿐 아니라 검색 엔진 최적화에도 도움을 준다. 하지만, 이런 속성들은 자신의 공간을 그대로 차지한다거나, 아예 마크업 자체를 인식하지 못한다거나 하는 문제로 인해 위 명시한 IR 기법의 목적을 위해 사용하기에는 적합하... 멋쟁이 사자처럼CSSCSS 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 19일 IR 기법 레티나 디스플레이 대응법 중요한 이미지 대체텍스트로 이미지 off 경우에도 대체텍스트를 보여주고자 할 때 네이버가 사용하는 방법 여러가지 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법이다. 이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집한다. 레티나? 특정한 시야 거리에서 인간의 눈... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 18일 OOCSS (Object Oriented CSS) SMACSS (Scalable and Modular Architecture for CSS) BEM (Block, Element, Modifier) 구조에는 width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함된다. 스킨에는 font 관련 속성, color, background 등 레이아웃에 영향을 ... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 15일 codelion 강의 세렝게티 MBTI D-day 계산기 lotto 랜덤 번호 미니 게임 글자수 체크 세렝게티 MBTI D-day 계산기 lotto 랜덤 번호 미니 게임 글자수 체크 DRY Don’t Repeat Yourself for문 ⇒ 특정 횟수까지 반복 while문 ⇒ 특정 조건까지 반복 indexOf((a,b) ⇒ a - b)); 템플릿 리터럴 사용 이벤트 : 키보드를 누를 때(마다... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 12일 float float 속성은 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃을 사용한다면 더욱 간단하게 정렬 할 수 있지만, flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 속성을 사용해야 된다. 중요한 점은, float 속성을 사용할 때 요소의 위치를 고정시키는 position 속성이나 absolut... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 13일 가상 클래스 선택자와 가상 요소 선택자의 차이점 가상 클래스 선택자 가상 요소 선택자 가상 요소 선택자 종류 Flex Flex 장점 Flex 사용법 Flex 컨테이너 속성 가상 클래스 선택자 a:hover, p:nth-child(1) 와 같이 실제로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는 것처럼 작동한다고 하여 가상 클래스 선택자로 부른다. .foo:nth-child(od... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 14일 flex, basis, shrink, grow, flex basis flex shrink flex grwo flex grid flex basis flex item 들의 크기를 지정한다. 만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다. flex shrink flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다. flex... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 3주차 정리 position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다. 스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않길 원한다면, fixed 속성을 사용하면 된다. 2. floa... 주간 회고TIL멋쟁이 사자처럼TIL 주말 TIL - 4월 16일 함수 호이스팅 익명 함수, 기명 함수 즉시 실행 함수 콜백 함수 호이스팅(Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 자바스크립트는 위에서 아래로 해석하기 때문에 double() 함수 호출이 함수 표현부 보다 위에 있으므로 타입에러가 발생하게 된다. 함수 표현이 아닌 함수 선언시에는 함수 선언부가 유효범위 최상단으로 끌어올려지는 호이스팅으로 인해 함수 호출이 함수 선... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 스쿨 2기 - 2주차 정리 colspan 속성을 사용하면 열간 병합을 할 수 있다. 마진 병합 현상 이때 css의 설계된 부분에서 인접한 블록 요소의 상하단 마진이 병합되는 현상이 있는데 이를 마진 병합 현상이라고 일컫는다. 블록 요소의 상하단 마진 병합 병합 되는 위치에 공간을 차지하고 있는 어떠한 요소가 있다면 마진 병합 현상은 일어나지 않는다. 그럼 새로운 이 부모 요소 기준에서 만들어지고 부모 요소의 마진과 자... 주간 회고멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 2기 - 1 URL, IP, PORT 정리 URL 구글 URL → 네이버 URL → 벨로그 URL → - URL 구조 구조 3 : 11111 구글 → IP 142.250.66.78 네이버 IP → 223.130.200.104 ftp://000.000.000.000:21 HTML Living Standard란 무엇인가 ? HTML Living Standard <ol>, <ul>, <li> ol: 순서가 있... extensionCSgit멋쟁이 사자처럼코드라이언htmlCS 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 1일 CSS 간단한 이력서 페이지 오늘 들었던 CSS 특강 수업 중 등장했던 정보들을 간략히 기록하겠다! div 에 width 값이 지정되어 있지 않다면 부모요소를 기준으로 영역이 가득차게 된다. 타입 셀렉터는 초기화 할 때만 쓰자! body { margin : 0 ... } 에서 body 가 타입 셀렉터에 해당 블록 요소 보다는 블록 레벨 요소가 더 정확한 표현이다! 블록 레벨 영역은 기본적으로... 멋쟁이 사자처럼TILTIL Day 05. aspect-ratio 요즘에는 최신 기능으로 aspect-ratio 라는 속성을 css에서 지원한다고 한다. 하지만, padding을 이용해 화면비를 설정하는 방법을 알아보자. 이런식으로 설정한다면 3:1이 되지만, 반응형을 구현하지 못한다! 🐣 따라서 padding-top / padding-bottom 을 이용하자! padding-top을 %로 주게 되면 부모요소의 너비에 관계하여 높이를 설정하지 않았음에도 불... 멋쟁이 사자처럼TILTIL Day 08. 선택자 우선순위, 가변크기 선택자 우선순위에는 3가지 원칙이 있습니다. 1. 후자 우선의 원칙 2. 구체성의 원칙 3. 중요성의 원칙 동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다. 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다. 또한, 선택자의 우선순위는 상위 선택자의 우선순위를 넘지 못합니다! 동메달을 10개 가지고 있다고 해도 은메달, 금메달보다는 가치가 없는 것... 멋쟁이 사자처럼TILTIL Day 08. Margin Collapsing 인접하는 블록요소의 상하단의 마진이 겹치는 현상 겹치는 마진 중 큰 값으로 겹쳐지게 된다. 이는 의도된 현상으로 사용자가 편할 수 있지만 부모와 자식간에도 마진겹침이 일어나기 때문에 혼란을 겪을 수 있다! 부모와 자식간의 마진겹침은 무엇이고 또 어떤 해결방법이 있을까? 이렇게 parents 안에 2개의 children이 있다고 하자! 우리가 위에서 알고있는 마진겹침현상을 생각해본다면 예상결과... 빔캠프멋쟁이 사자처럼TILTIL Day 07. Table <caption> 은 테이블의 제목이나 설명 <table> 요소의 첫번째 자식으로 사용해야 한다. colspan : 열과 열 병합 즉, 가로 방향으로 셀들을 병합 rowspan : 행과 행 병합 즉, 세로 방향으로 셀들을 병합 <colgroup> 과 그 자식 요소로 쓰이는 <col> 요소를 이용하여 한 열에 공통적인 스타일을 줄 수 있다. <colgroup> 안의 <col> 요소는 각각 테이... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 프론트엔드 스쿨 TIL 3일차 😊 <a> 😊 <dfn> 😊 <abbr> 😊 <sup>, <sub> <sup>태그는 윗첨자, <sub>태그는 아랫첨자를 나타냅니다. 😊 <img> 또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함 으로써 SEO(Search Engine Optimization) 에 도움을 주기도 합니다! 반응형 이미지를 위한 srcs... TIL멋쟁이 사자처럼TIL
멋쟁이 사자처럼 FE 스쿨 2기 - 4월 20일 반응형 이미지 반응형 백그라운드 이미지 반응형 동영상 이미지 포맷의 종류를 한 번 더 살펴보자. GIF(Graphics Interchange Format) : 256색의 컬러만 표현 가능하기 때문에 선명하진 않지만 용량이 적게 든다. 투명은 표현 가능하지만 그 정도를 조절하는건 불가능하며, 때문에 그림자 표현도 불가능하다. 웬만한 컬러는 모두 표현 가능하기 때문에 투명 영역 처리는 가능하지만... 멋쟁이 사자처럼TILTIL 기업들이 사용하는 IR(image Replacement) 기법들 특정 요소를 스크린 리더 친화적 환경을 위해서라면 html 문서에는 남겨둬야하지만, 동시에 디자인적으로는 숨겨야 하는 때가 있다. 이런 IR 기법은 스크린 리더의 사용성을 높일 뿐 아니라 검색 엔진 최적화에도 도움을 준다. 하지만, 이런 속성들은 자신의 공간을 그대로 차지한다거나, 아예 마크업 자체를 인식하지 못한다거나 하는 문제로 인해 위 명시한 IR 기법의 목적을 위해 사용하기에는 적합하... 멋쟁이 사자처럼CSSCSS 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 19일 IR 기법 레티나 디스플레이 대응법 중요한 이미지 대체텍스트로 이미지 off 경우에도 대체텍스트를 보여주고자 할 때 네이버가 사용하는 방법 여러가지 이미지를 하나의 이미지 파일안에 배치하여 이미지로드 부담을 줄이는 방법이다. 이미지를 편집할 때는 온라인 에디터를 사용하거나 직접 에디팅 앱(포토샵, 피그마, 스케치 등)을 사용해 개발자가 직접 편집한다. 레티나? 특정한 시야 거리에서 인간의 눈... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 18일 OOCSS (Object Oriented CSS) SMACSS (Scalable and Modular Architecture for CSS) BEM (Block, Element, Modifier) 구조에는 width, height, padding, margin 등 레이아웃에 영향을 미치는 속성들이 포함된다. 스킨에는 font 관련 속성, color, background 등 레이아웃에 영향을 ... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 15일 codelion 강의 세렝게티 MBTI D-day 계산기 lotto 랜덤 번호 미니 게임 글자수 체크 세렝게티 MBTI D-day 계산기 lotto 랜덤 번호 미니 게임 글자수 체크 DRY Don’t Repeat Yourself for문 ⇒ 특정 횟수까지 반복 while문 ⇒ 특정 조건까지 반복 indexOf((a,b) ⇒ a - b)); 템플릿 리터럴 사용 이벤트 : 키보드를 누를 때(마다... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 12일 float float 속성은 주로 레이아웃을 구성할 때 블록 레벨 요소를 가로 정렬하기 위해 사용되는 중요한 기법이다. flexbox 레이아웃을 사용한다면 더욱 간단하게 정렬 할 수 있지만, flexbox 레이아웃을 지원하지 않는 IE를 고려해야 한다면 float 속성을 사용해야 된다. 중요한 점은, float 속성을 사용할 때 요소의 위치를 고정시키는 position 속성이나 absolut... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 13일 가상 클래스 선택자와 가상 요소 선택자의 차이점 가상 클래스 선택자 가상 요소 선택자 가상 요소 선택자 종류 Flex Flex 장점 Flex 사용법 Flex 컨테이너 속성 가상 클래스 선택자 a:hover, p:nth-child(1) 와 같이 실제로 html에 존재하지 않는 클래스지만 마치 클래스가 존재하는 것처럼 작동한다고 하여 가상 클래스 선택자로 부른다. .foo:nth-child(od... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 14일 flex, basis, shrink, grow, flex basis flex shrink flex grwo flex grid flex basis flex item 들의 크기를 지정한다. 만약 flex-basis 값이 적용되어 있다면 width, height 값은 무시된다. flex shrink flex item의 너비에 대한 축소 인자(flex shrink factor)를 지정한다. flex... TIL멋쟁이 사자처럼TIL 멋쟁이 사자처럼 FE 스쿨 2기 - 3주차 정리 position 속성을 이용해 우리는 페이지의 레이아웃을 결정할 수 있다. relative, absolute, fixed 같은 position 속성이 부모에 놓여있다면, absolute는 position 속성을 가진 가장 가까운 부모의 박스 내를 기준으로 위치하게 된다. 스크롤을 올리거나 내릴 때, 특정 박스가 고정되어 움직이지 않길 원한다면, fixed 속성을 사용하면 된다. 2. floa... 주간 회고TIL멋쟁이 사자처럼TIL 주말 TIL - 4월 16일 함수 호이스팅 익명 함수, 기명 함수 즉시 실행 함수 콜백 함수 호이스팅(Hoisting) 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상 자바스크립트는 위에서 아래로 해석하기 때문에 double() 함수 호출이 함수 표현부 보다 위에 있으므로 타입에러가 발생하게 된다. 함수 표현이 아닌 함수 선언시에는 함수 선언부가 유효범위 최상단으로 끌어올려지는 호이스팅으로 인해 함수 호출이 함수 선... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 스쿨 2기 - 2주차 정리 colspan 속성을 사용하면 열간 병합을 할 수 있다. 마진 병합 현상 이때 css의 설계된 부분에서 인접한 블록 요소의 상하단 마진이 병합되는 현상이 있는데 이를 마진 병합 현상이라고 일컫는다. 블록 요소의 상하단 마진 병합 병합 되는 위치에 공간을 차지하고 있는 어떠한 요소가 있다면 마진 병합 현상은 일어나지 않는다. 그럼 새로운 이 부모 요소 기준에서 만들어지고 부모 요소의 마진과 자... 주간 회고멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 FE 2기 - 1 URL, IP, PORT 정리 URL 구글 URL → 네이버 URL → 벨로그 URL → - URL 구조 구조 3 : 11111 구글 → IP 142.250.66.78 네이버 IP → 223.130.200.104 ftp://000.000.000.000:21 HTML Living Standard란 무엇인가 ? HTML Living Standard <ol>, <ul>, <li> ol: 순서가 있... extensionCSgit멋쟁이 사자처럼코드라이언htmlCS 멋쟁이 사자처럼 FE 스쿨 2기 - 4월 1일 CSS 간단한 이력서 페이지 오늘 들었던 CSS 특강 수업 중 등장했던 정보들을 간략히 기록하겠다! div 에 width 값이 지정되어 있지 않다면 부모요소를 기준으로 영역이 가득차게 된다. 타입 셀렉터는 초기화 할 때만 쓰자! body { margin : 0 ... } 에서 body 가 타입 셀렉터에 해당 블록 요소 보다는 블록 레벨 요소가 더 정확한 표현이다! 블록 레벨 영역은 기본적으로... 멋쟁이 사자처럼TILTIL Day 05. aspect-ratio 요즘에는 최신 기능으로 aspect-ratio 라는 속성을 css에서 지원한다고 한다. 하지만, padding을 이용해 화면비를 설정하는 방법을 알아보자. 이런식으로 설정한다면 3:1이 되지만, 반응형을 구현하지 못한다! 🐣 따라서 padding-top / padding-bottom 을 이용하자! padding-top을 %로 주게 되면 부모요소의 너비에 관계하여 높이를 설정하지 않았음에도 불... 멋쟁이 사자처럼TILTIL Day 08. 선택자 우선순위, 가변크기 선택자 우선순위에는 3가지 원칙이 있습니다. 1. 후자 우선의 원칙 2. 구체성의 원칙 3. 중요성의 원칙 동일한 선택자가 연속으로 사용되었을 경우 후자가 우선합니다. 한 선택자가 다른 선택자보다 더 구체적으로 작성되었다면 구체적인 선택자가 우선합니다. 또한, 선택자의 우선순위는 상위 선택자의 우선순위를 넘지 못합니다! 동메달을 10개 가지고 있다고 해도 은메달, 금메달보다는 가치가 없는 것... 멋쟁이 사자처럼TILTIL Day 08. Margin Collapsing 인접하는 블록요소의 상하단의 마진이 겹치는 현상 겹치는 마진 중 큰 값으로 겹쳐지게 된다. 이는 의도된 현상으로 사용자가 편할 수 있지만 부모와 자식간에도 마진겹침이 일어나기 때문에 혼란을 겪을 수 있다! 부모와 자식간의 마진겹침은 무엇이고 또 어떤 해결방법이 있을까? 이렇게 parents 안에 2개의 children이 있다고 하자! 우리가 위에서 알고있는 마진겹침현상을 생각해본다면 예상결과... 빔캠프멋쟁이 사자처럼TILTIL Day 07. Table <caption> 은 테이블의 제목이나 설명 <table> 요소의 첫번째 자식으로 사용해야 한다. colspan : 열과 열 병합 즉, 가로 방향으로 셀들을 병합 rowspan : 행과 행 병합 즉, 세로 방향으로 셀들을 병합 <colgroup> 과 그 자식 요소로 쓰이는 <col> 요소를 이용하여 한 열에 공통적인 스타일을 줄 수 있다. <colgroup> 안의 <col> 요소는 각각 테이... 멋쟁이 사자처럼TILTIL 멋쟁이 사자처럼 프론트엔드 스쿨 TIL 3일차 😊 <a> 😊 <dfn> 😊 <abbr> 😊 <sup>, <sub> <sup>태그는 윗첨자, <sub>태그는 아랫첨자를 나타냅니다. 😊 <img> 또한 스크린리더와 같은 접근성을 위한 프로그램에 정보를 제공하기 위한 용도로 사용되며, 브라우저에 이미지에 대한 정보를 전달함 으로써 SEO(Search Engine Optimization) 에 도움을 주기도 합니다! 반응형 이미지를 위한 srcs... TIL멋쟁이 사자처럼TIL